<template>
<div style="margin-left: 5px;margin-right: 5px;width:28px">
  <el-upload
    class="upload-demo"
    :action="minderUrl.upload"
    :file-list="fileList"
    :before-upload="beforeAvatarUpload"
    :on-success="onSuccess"
    :on-error="onError"
  >
    <el-button type="primary" icon="el-icon-picture" size="mini" circle title="图片上传"></el-button>
  </el-upload>
  <el-button type="warning" icon="el-icon-delete" size="mini" circle @click="deleteImage" title="图片删除"></el-button>
</div>
</template>

<script>

import {editMenuProps} from "../../props";

export default {
  name: 'tagBox',
  props: {
    ...editMenuProps
  },
  data() {
    return {
      minder: undefined,
      fileList: [],
      hyperlink: undefined,
      dialogVisible: false
    }
  },
  computed: {

  },
  mounted() {
    console.info(JSON.parse(JSON.stringify(this.minderUrl)))
    if(this.minderUrl.upload){
      sessionStorage.setItem("minderUrl",JSON.stringify(this.minderUrl))
    }
    this.$nextTick(() => {
      this.minder = minder;
    })
  },
  methods: {
    deleteImage(){
      // console.info(this.minder)
      this.minder.execCommand('image', undefined)
      this.minder.execCommand('imageSize', undefined);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.name.lastIndexOf('.jpg') > 0 || file.name.lastIndexOf('.jpeg') > 0 || file.name.lastIndexOf('.png') > 0
      const isLt2M = file.size / 1024 / 1024 < 5
      console.info(file)
      if (!isJPG) {
        this.$message.warning('上传文件只能是 jpg/jpeg/png 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.warning('上传文件图片大小不能超过 5MB!')
        return false
      }
      return true
    },
    onSuccess(response, file, fileList) {
      console.log(response);
      if (response.code === 0) {
        this.$message({
          message: '上传成功',
          type: 'success',
          duration: 2000
        })
        this.minder.execCommand('image', this.minderUrl.download+'/'+response.data);
        this.minder.execCommand('imageSize', { "width": 270, "height": 129 });
      }else{
        this.$message({
          message: '上传失败' + response.msg,
          type: 'error',
          duration: 2000
        })
      }
      this.fileList = []
    },
    // eslint-disable-next-line handle-callback-err
    onError(err, file, fileList) {
      this.$message({
        message: '上传失败',
        type: 'error',
        duration: 2000
      })
      this.fileList = []
    },
    getResourceColor(resource) {
      if (this.minder && this.minder.getResourceColor) {
        return this.minder.getResourceColor(resource).toHEX();
      }
    },
    editResource(resourceName) {
      if (this.commandDisabled) {
        return;
      }
      if (this.tagEditCheck) {
        if (!this.tagEditCheck(resourceName)) {
          return;
        }
      }
      let origin = this.minder.queryCommandValue('resource');
      if (!resourceName || !/\S/.test(resourceName)) return;
      let index = origin.indexOf(resourceName);
      // 先删除排他的标签
      if (this.distinctTags.indexOf(resourceName) > -1) {
        for (let i = 0; i < origin.length; i++) {
          if (this.distinctTags.indexOf(origin[i]) > -1) {
            origin.splice(i, 1);
            i--;
          }
        }
      }
      if (index != -1) {
        origin.splice(index, 1);
      } else {
        origin.push(resourceName);
      }
      this.minder.execCommand('resource', origin);
    },
  },
}
</script>

<style scoped>

 .el-tag {
   margin: 2px;
   border: 0px;
   color: black;
 }

 .el-tag:hover {
   cursor: pointer;
 }

 .el-tag:first-child {
   margin-left: 4px;
 }
</style>

<style scoped>
   .add-btn {
     height: 24px;
     width: 36px;
     padding: 0px !important;
     border-style: dashed !important;
   }
</style>
